@charset "UTF-8";

/* 先确定 栅格系统 中浮动的子元素的父元素的样式 */
.row {
    display: block ; /* 父元素将以块元素形式存在 */
    overflow: hidden ; /* 如果所有子元素都浮动了，则可能导致它们的父元素塌陷，这里采用了 overflow 来解决 */
}

/* 将一个父元素的一整行均分为 五等份 */
.row .cells-5-1 { float: left ; width: 20% ; }
.row .cells-5-2 { float: left ; width: 40% ; }
.row .cells-5-3 { float: left ; width: 60% ; }
.row .cells-5-4 { float: left ; width: 80% ; }

.row .offset-5-1 { margin-left: 20% ; }
.row .offset-5-2 { margin-left: 40% ; }
.row .offset-5-3 { margin-left: 60% ; }
.row .offset-5-4 { margin-left: 80% ; }

/* 将一个父元素的一整行均分为 十二等份 */
.row .cells-12-1 { float : left ; width: 8.333333333% ; }
.row .cells-12-2 { float : left ; width: 16.666666667% ; }
.row .cells-12-3 { float : left ; width: 25% ; }
.row .cells-12-4 { float : left ; width: 33.333333333% ; }
.row .cells-12-5 { float : left ; width: 41.666666667% ; }
.row .cells-12-6 { float : left ; width: 50% ; }
.row .cells-12-7 { float : left ; width: 58.333333333% ; }
.row .cells-12-8 { float : left ; width: 66.666666667% ; }
.row .cells-12-9 { float : left ; width: 75% ; }
.row .cells-12-10 { float : left ; width: 83.333333333% ; }
.row .cells-12-11 { float : left ; width: 91.666666667% ; }

.row .offset-12-1 {  margin-left: 8.333333333% ; }
.row .offset-12-2 {  margin-left: 16.666666667% ; }
.row .offset-12-3 {  margin-left: 25% ; }
.row .offset-12-4 {  margin-left: 33.333333333% ; }
.row .offset-12-5 {  margin-left: 41.666666667% ; }
.row .offset-12-6 {  margin-left: 50% ; }
.row .offset-12-7 {  margin-left: 58.333333333% ; }
.row .offset-12-8 {  margin-left: 66.666666667% ; }
.row .offset-12-9 {  margin-left: 75% ; }
.row .offset-12-10 {  margin-left: 83.333333333% ; }
.row .offset-12-11 {  margin-left: 91.666666667% ; }

/* 这套栅格系统是有缺陷的 ，比如为元素增加边框可能导致最末尾的元素被挤到下一行 */